<template>
  <view class="shop-page">
    <search-bar placeholder="搜索商品..." @search="handleSearch" />
    
    <!-- 轮播图 -->
    <swiper class="banner-swiper" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(banner, index) in banners" :key="index">
        <image class="banner-img" :src="banner.image" mode="aspectFill" />
      </swiper-item>
    </swiper>
    
    <!-- 商品分类 -->
    <view class="category-grid">
      <view 
        v-for="(cat, index) in productCategories" 
        :key="index"
        class="category-card"
        @click="selectCategory(index)"
      >
        <text class="category-icon">{{ cat.icon }}</text>
        <text class="category-name">{{ cat.name }}</text>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <view class="product-list">
      <product-card 
        v-for="product in filteredProducts" 
        :key="product.id"
        :product="product"
        @addToCart="handleAddToCart"
        @buy="handleBuyNow"
      />
    </view>
    
    <!-- 购物车图标 -->
    <view class="cart-float" @click="goToCart">
      <text class="cart-icon">🛒</text>
      <view class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import SearchBar from '../../components/SearchBar.vue'
import ProductCard from '../../components/ProductCard.vue'

const searchKeyword = ref('')
const selectedCategory = ref(0)
const cartCount = ref(3)

// 假数据
const banners = [
  { image: 'https://via.placeholder.com/750x300/ff6b35/ffffff?text=限时特价' },
  { image: 'https://via.placeholder.com/750x300/ff8c42/ffffff?text=新品上市' },
  { image: 'https://via.placeholder.com/750x300/ffa726/ffffff?text=满减活动' }
]

const productCategories = [
  { icon: '📱', name: '数码' },
  { icon: '👕', name: '服饰' },
  { icon: '🏠', name: '家居' },
  { icon: '📚', name: '图书' },
  { icon: '🎮', name: '娱乐' },
  { icon: '🍔', name: '美食' }
]

const products = ref([
  {
    id: 1,
    name: 'iPhone 15 Pro Max',
    price: 9999,
    originalPrice: 10999,
    image: 'https://via.placeholder.com/300x300/ff6b35/ffffff?text=iPhone',
    sales: 1234,
    rating: 4.9,
    category: 0
  },
  {
    id: 2,
    name: '时尚休闲T恤',
    price: 89,
    originalPrice: 129,
    image: 'https://via.placeholder.com/300x300/ff6b35/ffffff?text=T恤',
    sales: 567,
    rating: 4.7,
    category: 1
  },
  {
    id: 3,
    name: '北欧风格台灯',
    price: 299,
    originalPrice: 399,
    image: 'https://via.placeholder.com/300x300/ff6b35/ffffff?text=台灯',
    sales: 234,
    rating: 4.8,
    category: 2
  }
])

const filteredProducts = computed(() => {
  let result = products.value
  
  if (selectedCategory.value > 0) {
    result = result.filter(product => product.category === selectedCategory.value)
  }
  
  if (searchKeyword.value) {
    result = result.filter(product => 
      product.name.includes(searchKeyword.value)
    )
  }
  
  return result
})

const handleSearch = (keyword) => {
  searchKeyword.value = keyword
}

const selectCategory = (index) => {
  selectedCategory.value = index
}

const handleAddToCart = (productId) => {
  cartCount.value += 1
  uni.showToast({ title: '已加入购物车', icon: 'success' })
}

const handleBuyNow = (productId) => {
  uni.showToast({ title: '跳转到购买页面', icon: 'none' })
}

const goToCart = () => {
  uni.navigateTo({ url: '/pages/CartPage/CartPage' })
}
</script>

<style scoped>
.shop-page {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 140rpx; /* 增加底部padding，确保不被tabBar遮挡 */
}
.banner-swiper {
  height: 300rpx;
}
.banner-img {
  width: 100%;
  height: 100%;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 20rpx;
  background: #fff;
  margin-bottom: 20rpx;
}
.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  background: #f8f8f8;
  border-radius: 20rpx;
}
.category-icon {
  font-size: 60rpx;
  margin-bottom: 15rpx;
}
.category-name {
  font-size: 24rpx;
  color: #333;
}
.product-list {
  padding: 0 20rpx;
}
.cart-float {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  width: 100rpx;
  height: 100rpx;
  background: #ff6b35;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(255, 107, 53, 0.3);
}
.cart-icon {
  font-size: 50rpx;
  color: #fff;
}
.cart-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #ff4757;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 20rpx;
  min-width: 30rpx;
  text-align: center;
}
</style>
